<!-- 核酸检测 -->
<template>
	<view class="no-warpper">
		<view class="top">
			<view @click="scanCode()" class="item">
				<text>扫码</text>
			</view>
			<text style="color: #f9f9f9;">|</text>
			<view @click="$goToUrl('/pages/nucleic/call/call')" class="item">
				<text>叫号</text>
			</view>
		</view>

		<view class="center">
			<view class="item" @click="$goToUrl('/pages/nucleic/testPlace/testPlace')">
				<view class="img">
					<image src="../../../static/nucleic/i-jcd.png" mode="aspectFit"></image>
				</view>
				<text>检测点</text>
			</view>
			<view class="item" @click="$goToUrl('/pages/nucleic/register/register')">
				<view class="img">
					<image src="../../../static/nucleic/i-djry.png" mode="aspectFit"></image>
				</view>
				<text>登记人员</text>
			</view>
			<view class="item" @click="$goToUrl('/pages/nucleic/statistics/statistics')">
				<view class="img">
					<image src="../../../static/nucleic/i-tjjc.png" mode="aspectFit"></image>
				</view>
				<text>统计检测</text>
			</view>
		</view>

		<view class="bottom">
			<view class="item">
				<text>{{info.userTotal ? info.userTotal : 0}}</text>
				<view>登记人数</view>
			</view>
			<view class="item">
				<text>{{info.passTotal ? info.passTotal : 0}}</text>
				<view>已检人数</view>
			</view>
			<view class="item">
				<text>{{info.unSendTotal ? info.unSendTotal : 0}}</text>
				<view>未通知人数</view>
			</view>
			<view class="item">
				<text>{{info.waitTotal ? info.waitTotal : 0}}</text>
				<view>未检人数</view>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		updateNucleicLog,
		queryNucleicReport
	} from '@/api/nucleic.js';
	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad() {
			this.queryNucleicReport()
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		methods: {
			/**
			 * 小区数据总统计
			 */
			queryNucleicReport() {
				let parmas = {
					communityId: this.userCommunity.communityId
				}
				queryNucleicReport(parmas).then((res) => {
					if (res.code == 0) {
						this.info = res.data
					}
				}).catch(function(reason) {

				})
			},
			/**
			 * 扫码
			 */
			scanCode() {
				let self = this
				uni.scanCode({
					success: function(res) {
						console.log('条码内容：' + res.result);
						self.updateNucleicLog(res.result)
					}
				});
			},
			updateNucleicLog(id) {
				this.$refs.uToast.show({
					title: '核酸登记中',
					type: 'default',
					icon: false
				})

				let parmas = {
					nucleicUserId: id
				}
				updateNucleicLog(parmas).then((res) => {
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: '核酸登记成功',
							type: 'success',
						})

						this.queryNucleicReport()
					} else if (res.code == 404) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				}).catch(function(reason) {

				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		display: flex;
		align-items: center;
		background-color: $nl-color-main;
		border-radius: $nl-border-radius-main;
		padding: 12rpx;
		margin-bottom: 32rpx;

		.item {
			flex: 1;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 32rpx;
			text-align: center;
			border-radius: $nl-border-radius-main;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			text {
				color: #f9f9f9;
				padding: 0 12rpx;
			}
			
			.img{
				width: 64rpx;
				height: 64rpx;
			}
		}

		.item:active {
			background-color: #248eff;
		}

		
	}

	.center {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: $nl-border-radius-main;
		padding: 12rpx;
		box-shadow: $nl-box-shadow-grey;
		margin-bottom: 32rpx;

		.item {
			flex: 1;
			padding: 12rpx 0;
			border-radius: $nl-border-radius-main;

			.img {
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
			}

			text {
				width: 100%;
				display: block;
				text-align: center;
				font-size: $uni-font-size-sm;
				margin-top: 16rpx;
			}
		}

		.item:nth-child(2) {
			margin: 0 12rpx;
		}

		.item:active {
			background-color: #f9f9f9;
		}

	}

	.bottom {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: $nl-border-radius-main;
		padding: 12rpx 56rpx;
		box-shadow: $nl-box-shadow-grey;

		.item {
			width: 50%;
			padding: 20rpx 0;
			border-radius: $nl-border-radius-main;

			text {
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				display: inline-block;
				text-align: center;
				font-size: 56rpx;
				font-weight: 600;
				margin-bottom: 8rpx;
			}

			view {
				width: 100%;
				color: #414141;
				text-align: center;
				font-size: 28rpx;
			}
		}

		.item:nth-child(1) {
			text {
				color: #414141;
			}
		}

		.item:nth-child(2) {
			text {
				color: #19be6b;
			}
		}

		.item:nth-child(3) {
			text {
				color: #ff9900;
			}
		}

		.item:nth-child(4) {
			text {
				color: #fa3534;
			}
		}
	}
</style>
